<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 1000px;
				height: 600px;
				border:1px solid #000000;
			}
			.cell {
				position: absolute;
				width: 100px;
				height: 60px;
				border-radius: 5px;
				border: 2px solid #000;
				line-height: 60px;
				cursor: pointer;
				font-size: 12px;
				text-align: center;
				z-index: 666;
			}
			.cell .cell-info{
				width: 80px;
				height: 180px;
				background: #fff;
				border:1px solid #ccc;
				border-radius: 5px;
				text-align: left;
				z-index: 999;
			}
			.diamond{   
				width: 80px; 
				border:1px solid #000000;
				height: 80px;
				transform:rotate(45deg);  
				-ms-transform:rotate(45deg); /* Internet Explorer */  
				-moz-transform:rotate(45deg); /* Firefox */  
				-webkit-transform:rotate(45deg); /* Safari 和 Chrome */  
				-o-transform:rotate(45deg); /* Opera */   
				margin:50px auto;
				/*让菱形浏览器上居中*/ 
			 }
		</style>
	</head>

	<body>
		<div class="box" id="box">

			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%"height="100%">
				<line x1="0" y1="0" x2="300" y2="300" id="line" style="stroke:rgb(99,99,99);stroke-width:2" />
			</svg>

		</div>
		<!-- <div class="diamond cell" id="2200"></div> -->
	</body>

</html>

<script src="js/router-edut.js" type="text/javascript" charset="utf-8"></script>
<script src="js/CellInfo.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Cell.js" type="text/javascript" charset="utf-8"></script>
<script src="js/DrawBoard.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Line.js" type="text/javascript" charset="utf-8"></script>
<script>
	/* 测试。改变线的形状 */
	// function changeLine(){
	// 	var line = document.getElementById("line");
	// 	line.setAttribute("y2",200)
	// }
	var line = document.getElementById("line");
	var routerEdit = new RouterEdit();
	/* 画板 */
	var drawBoard = new DrawBoard("box");
	var body = document.body;
	var selectedElement = {}; /* 选中元素 */
	var x, y; //鼠标相对与div左边，上边的偏移
	var isDrop = false; //移动状态的判断鼠标按下才能移动
	const cellPool = new Map();
	const SVG_IN = "http://www.w3.org/2000/svg";

	function createCell() {
		var cell = new Cell();
		cellPool.set(cell.getCell(), cell.getCell())
		drawBoard.insertNode(cell);
		window.testCell = cell;
		selectedElement = cell.getElement();
	}
	var current_line;
	document.addEventListener("mousedown", function(e) {
		/* 鼠标按下创建一条线 */
		var svg_line = new Line(e);
		drawBoard.insertNode(svg_line);
		current_line = svg_line.getElement();
		
		CellInfo.clear();
		if (e.target.className == "cell") {
			routerEdit.loseFocus();
			selectedElement = e.target;
			selectedElement.style.background = "red";
		}
	})

	document.addEventListener("mouseover", function(e) {
		/* e.target */
		CellInfo.clear();
		if (e.target.className == "cell") {
			var target = e.target;
			var cellInfoObject = new CellInfo(target);
			var cellInfo = cellInfoObject.element();
			target.appendChild(cellInfo)
		}

	})

	document.onmousedown = function(e) {
		var e = e || window.event; //要用event这个对象来获取鼠标的位置
		// console.log("鼠标按下")
		x = e.clientX - selectedElement.offsetLeft;
		y = e.clientY - selectedElement.offsetTop;
		isDrop = true; //设为true表示可以移动
	}

	document.onmousemove = function(e) {
		/* 随着鼠标的移动而改变line的结束位置 */
		if(line!=null){
			console.log(e)
			line.setAttribute("x2",e.clientX);
			line.setAttribute("y2",e.clientY);
		}
		//是否为可移动状态                　　　　　　　　　　　 　　　　　　　
		if (isDrop) {
			var e = e || window.event;
			var moveX = e.clientX - x; //得到距离左边移动距离                    　　
			var moveY = e.clientY - y; //得到距离上边移动距离
			//可移动最大距离
			var maxX = document.documentElement.clientWidth - selectedElement.offsetWidth;
			var maxY = document.documentElement.clientHeight - selectedElement.offsetHeight;
			//范围限定方法二　
			moveX = Math.min(maxX, Math.max(0, moveX));

			moveY = Math.min(maxY, Math.max(0, moveY));
			selectedElement.style.left = moveX + "px";
			selectedElement.style.top = moveY + "px";
		} else {
			return;
		}

	}

	document.onmouseup = function() {
		isDrop = false; //设置为false不可移动
	}
</script>
